<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<!-- 引用模板 Header -->
	<div th:insert="bg/publicHead :: publicHead(${pageName})"></div>
    <script src="/js/sweetalert.min.js"></script>
	<!-- [ Header ] end -->
    <style type="text/css">
        .inputStyle{ padding:0px !important; }
        i{ cursor:pointer; }
        .red{ color:#FF3535; font-weight:700; }
        .blue{color:#0000ff; font-weight:700;}
        .img{width:50px; height:50px;}
    </style>

    <script th:inline="javascript">
        var ServerIP= [[${ServerIP}]];

        var isDefindPath=false;
        var defaultpath="pages/index/index";
        var wxhref1=defaultpath;
        var wxhref2=defaultpath;
        var wxhref3=defaultpath;
        var wxhref4=defaultpath;
        var wxhref5=defaultpath;

        $(document).ready(function() {


            //小程序地址渲染
            let addElm=function(){
                let divHtml="<div class='elmBox'>";
                    divHtml+="<select class=\"wxhref\">";
                    divHtml+="<option selected=\"selected\" value=\"pages/index/index\">首页</option>";
                    divHtml+="<option value=\"pages/class/class\">商品分类</option>";
                    divHtml+="<option value=\"自定义路径\">自定义路径</option>";
                    divHtml+="";
                    divHtml+="</select>"
                    divHtml+="<div style='position:relative; display:none;' class='diyPath'>";
                    divHtml+="<input class=\"form-control wxpathval\" type=\"text\" />";
                    divHtml+="<span class='choice' style='position:absolute; right:0px; top:15px; width:80px; height:80px; text-align:center; color:#000; cursor:pointer;'>重选</span>";
                    divHtml+="</div>";
                divHtml+="</div>";
               return divHtml;
            }
            $(".selectElm").html(addElm());


            //定义选择事件
            $(document).on("change",".wxhref",function(){
                /*let parentId=$(this).parents(".selectElm").attr("id");
                alert(parentId);*/

                let selectVal=$(this).val();

                /*
                let selindex=$(this).parents(".selectElm").attr("index");

                if(selindex===1){
                    wxhref1=selectVal;
                }
                if(selindex===2){
                    wxhref2=selectVal;
                }
                if(selindex===3){
                    wxhref3=selectVal;
                }
                if(selindex===4){
                    wxhref4=selectVal;
                }
                if(selindex===5){
                    wxhref5=selectVal;
                }*/
                console.log("下拉选择事件",selectVal);

                if(selectVal==='自定义路径'){
                    isDefindPath=true;
                    $(this).next(".diyPath").css("display","block");
                    $(this).remove();
                }else{
                    isDefindPath=false;
                    let indexNumber=parseInt($(this).parents(".selectElm").attr("index"));
                    //alert(indexNumber);
                    if(indexNumber===1){
                        wxhref1=selectVal;
                    }
                    if(indexNumber===2){
                        wxhref2=selectVal;
                    }
                    if(indexNumber===3){
                        wxhref3=selectVal;
                    }
                    if(indexNumber===4){
                        wxhref4=selectVal;
                    }
                    if(indexNumber===5){
                        wxhref5=selectVal;
                    }
                    //console.log("值：",wxhref1,wxhref2,wxhref3,wxhref4,wxhref5)
                }
            });
            $(document).on("click",".choice",function(){
                //alert($(this).parents(".selectElm").attr("id")+"");
                isDefindPath=false;
                let parentId=$(this).parents(".selectElm").attr("id");
                $(this).parents(".elmBox").remove();
                $("#"+parentId).html(addElm());
            });


            $(".choiceReset").click(function(){
                let index=$(this).attr("index");
                //alert("重设"+index);
                $("#selectElm"+index).css("display","block");
                $("#diyinput"+index).css("display","none");
            });



            /*$(".wxhref").live("change",function(){
                //alert($(this).val());
               console.log("下拉选择事件")
            });*/




            $(".funBtn").click(async function(){

                var index = $(this).attr("ordernum");
                //console.log(index);
                let inputVal=$("#selectElm"+index+" .wxpathval").val();
                console.log(inputVal);

                var wxhref="";
                if(isDefindPath===true){
                    wxhref=inputVal;
                }else{
                    if(parseInt(index)===1){
                        wxhref= wxhref1;
                    }
                    if(parseInt(index)===2){
                        wxhref= wxhref2;
                    }
                    if(parseInt(index)===3){
                        wxhref= wxhref3;
                    }
                    if(parseInt(index)===4){
                        wxhref= wxhref4;
                    }
                    if(parseInt(index)===5){
                        wxhref= wxhref5;
                    }
                }
                //alert("小程序路径:"+wxhref);
                console.log(index+":小程序路径:"+wxhref);
                //return;

                var flag=$(this).attr("title");
                var ordernum=$(this).attr("ordernum");
                var that=$(this);
                var updateData=null;
                if(ordernum>6){
                    alert("超出顺序范围");
                    return;
                }
                switch(flag) {
                    case "更新":
                        if (confirm("是否提交更新?")) {
                            updateData={
                                adtitle:$("#title"+ordernum).val(),
                                status:'已审核',
                                adsort:ordernum,
                                adhref:$("#link"+ordernum).val(),
                                wxhref:wxhref
                            };
                            console.log("updateData:",updateData);
                            //return;
                            if(updateData!=null){
                                var res=await SyncJson(ServerIP+"api/updateHomeAdvertising",updateData);
                                console.log("服务器返回:",res)
                                if(res.code===200){
                                    alert("更新成功");
                                    window.location.href="ad.html";
                                }
                            }
                        }
                        break;
                    case "显示":
                        if (confirm("是否显示数据?")) {
                            updateData={
                                adsort:ordernum,
                                isshow:1
                            };
                            /*console.log("updateData:",updateData);
                            return;*/
                            if(updateData!=null){
                                var res=await SyncJson(ServerIP+"api/updateHomeAdvertising",updateData);
                                console.log("服务器返回:",res)
                                if(res.code===200){
                                    alert("更新成功");
                                    window.location.href="ad.html";
                                }
                            }
                        }
                        break;
                    case "隐藏":
                        if (confirm("是否隐藏数据?")) {
                            updateData={
                                adsort:ordernum,
                                isshow:0
                            };
                            /*console.log("updateData:",updateData);
                            return;*/
                            if(updateData!=null){
                                var res=await SyncJson(ServerIP+"api/updateHomeAdvertising",updateData);
                                if(res.code===200){
                                    alert("更新成功");
                                    window.location.href="ad.html";
                                }
                            }
                        }
                        break;
                }
            });
        });
    </script>
</head>


<body class="background-img-1">

	<!-- [ navigation menu ] start -->
	<!-- 引用模板 Header -->
        <div th:insert="bg/templateLeft :: Menu(${pageName})"></div>
	<!-- [ navigation menu ] end -->


	<!-- [ Header ] start -->
		<!-- 引用模板 Header -->
		<div th:insert="bg/templateTop :: Header"></div>
	<!-- [ Header ] end -->


<!-- [ Main Content ] start -->
<div class="pcoded-main-container"> <!--中间 Start -->

    <div class="pcoded-content">

        <!-- [ homePage ] start -->
        <!-- 引用模板 homePage -->
        <div th:insert="bg/homePage :: homePage"></div>
        <!-- [ homePage ] end -->


        <!-- [ Main Content ] start -->
        <!-- [ 内容区域 ] start -->
        <div class="row">
            <!-- 课程列表 -->

            <div class="col-xl-12 mainCotent">
                <h5><text th:text="${pageName}"></text></h5>
                <div><a href="ad.html">刷新</a></div>
                <!-- json源码 -->
                <!--<div th:text="${imageesData}"></div>-->

                <!-- Latest Order start -->
                <div class="col-md-12">
                    <div class="card table-card latest-activity-card" style="margin-top:20px;">

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover table-borderless">
                                    <!-- dt-responsive table-responsive -->
                                    <!--<table id="res-config" class="display table table-striped table-hover dt-responsive nowrap" style="width:100%">-->
                                    <thead>
                                    <tr>
                                        <th width="10px"><div align="center">显示顺序</div></th>
                                        <th width="180px"><div align="center">图片标题</div></th>
                                        <th width="100px"><div align="center">类型</div></th>
                                        <th width="500px"><div align="center">图片地址</div></th>
                                        <th width="500px"><div align="center">小程序路径</div></th>
                                        <th width="130px"><div align="center">审核状态</div></th>
                                        <th width="300px"><div align="center">操作</div></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td width="50px"><div align="center"><input class="form-control" disabled type="text" id="num1" value="1" style="width:50px;text-align:center;" /></div></td>
                                        <td width="200px"><div align="center"><input class="form-control" type="text" id="title1" th:if="${ad1!=null}" th:value="${ad1.adtitle}" style="width:200px;text-align:left;" /></div></td>
                                        <td width="100px">
                                            <div align="center"
                                                 th:if="${ad1!=null && ad1.adhref!=null
                                                 && (#strings.contains(ad1.adhref,'jpg')
                                                 || #strings.contains(ad1.adhref,'png')
                                                 || #strings.contains(ad1.adhref,'PNG')
                                                 || #strings.contains(ad1.adhref,'JPG')
                                                 || #strings.contains(ad1.adhref,'JPEG'))}">
                                                <img class="img" th:src="${ad1.adhref}"/>
                                            </div>
                                            <div align="center" th:if="${ad1!=null && ad1.adhref!=null && #strings.contains(ad1.adhref,'mp4')}">视频</div>
                                        </td>
                                        <td width="500px">
                                            <div align="center" th:if="${ad1!=null}"><input class="form-control" type="text" id="link1" th:value="${ad1.adhref}" style="width:500px;text-align:left;" /></div>
                                            <div align="center" th:if="${ad1==null}"><input class="form-control" type="text" id="link1" value="http://" style="width:500px;text-align:left;" /></div>
                                        </td>
                                        <td width="500">
                                            <!-- 有值时 -->
                                            <div id="diyinput1" style='position:relative;' class='diyPath' th:if="${ad1.wxhref!=null && ad1.wxhref!=''}" >
                                                <input class="form-control wxpathval" type="text"  th:value="${ad1.wxhref}"/>
                                                <span index="1" class='choiceReset' style='position:absolute; right:0px; top:15px; width:80px; height:80px; text-align:center; color:#000; cursor:pointer;'>重选</span>
                                            </div>

                                            <!-- 小程序地址渲染 -->
                                            <div align="center" class="selectElm" index="1" id="selectElm1" th:style="${(ad1.wxhref==null || ad1.wxhref=='')?'display:block;':'display:none;'}"></div>
                                        </td>
                                        <td width="130px">
                                            <div align="center" th:if="${ad1!=null}"><label class="badge status"  th:classappend="${ad1.status=='已审核'}?'badge-light-success':'badge-light-danger'"  th:text="${ad1.status}"></label></div>
                                        </td>
                                        <td width="300px">
                                            <div align="center">
                                                <a href="#!" index="1"  ordernum="1" title="更新" class="funBtn"><i class="icon feather icon-edit f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="1"  ordernum="1" title="显示" class="funBtn"><i class="fas fa-parking f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="1"  ordernum="1" title="隐藏" class="funBtn"><i class="fas fa-minus-circle f-w-600 f-16 text-c-red"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50px"><div align="center"><input class="form-control" disabled type="text" id="num2" value="2" style="width:50px;text-align:center;" /></div></td>
                                        <td width="200px"><div align="center"><input class="form-control" type="text" id="title2" th:if="${ad2!=null}" th:value="${ad2.adtitle}" style="width:200px;text-align:left;" /></div></td>
                                        <td width="100px">
                                            <div align="center"
                                                 th:if="${ad2!=null && ad2.adhref!=null
                                                 && (#strings.contains(ad2.adhref,'jpg')
                                                 || #strings.contains(ad2.adhref,'png')
                                                 || #strings.contains(ad2.adhref,'PNG')
                                                 || #strings.contains(ad2.adhref,'JPG')
                                                 || #strings.contains(ad2.adhref,'JPEG'))}">
                                                <img class="img" th:src="${ad2.adhref}"/>
                                            </div>
                                            <div align="center" th:if="${ad2!=null && ad2.adhref!=null && #strings.contains(ad2.adhref,'mp4')}">视频</div>
                                        </td>
                                        <td width="500px">
                                            <div align="center" th:if="${ad2!=null}"><input class="form-control" type="text" id="link2" th:value="${ad2.adhref}" style="width:500px;text-align:left;" /></div>
                                            <div align="center" th:if="${ad2==null}"><input class="form-control" type="text" id="link2" value="http://" style="width:500px;text-align:left;" /></div>
                                        </td>
                                        <td width="500">
                                            <!-- 有值时 -->
                                            <div id="diyinput2" style='position:relative;' class='diyPath' th:if="${ad2.wxhref!=null && ad2.wxhref!=''}" >
                                                <input class="form-control wxpathval" type="text"  th:value="${ad2.wxhref}"/>
                                                <span index="2" class='choiceReset' style='position:absolute; right:0px; top:15px; width:80px; height:80px; text-align:center; color:#000; cursor:pointer;'>重选</span>
                                            </div>

                                            <!-- 小程序地址渲染 -->
                                            <div align="center" class="selectElm" index="2" id="selectElm2" th:style="${(ad2.wxhref==null || ad2.wxhref=='')?'display:block;':'display:none;'}"></div>
                                        </td>
                                        <td width="130px">
                                            <div align="center" th:if="${ad2!=null}"><label class="badge status"  th:classappend="${ad2.status=='已审核'}?'badge-light-success':'badge-light-danger'"  th:text="${ad2.status}"></label></div>
                                        </td>
                                        <td width="300px">
                                            <div align="center">
                                                <a href="#!" index="2" ordernum="2" title="更新" class="funBtn"><i class="icon feather icon-edit f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="2" ordernum="2" title="显示" class="funBtn"><i class="fas fa-parking f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="2" ordernum="2" title="隐藏" class="funBtn"><i class="fas fa-minus-circle f-w-600 f-16 text-c-red"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50px"><div align="center"><input class="form-control" disabled type="text" id="num3" value="3" style="width:50px;text-align:center;" /></div></td>
                                        <td width="200px"><div align="center"><input class="form-control" type="text" id="title3" th:if="${ad3!=null}" th:value="${ad3.adtitle}" style="width:200px;text-align:left;" /></div></td>
                                        <td width="100px">
                                            <div align="center"
                                                 th:if="${ad3!=null && ad3.adhref!=null
                                                 && (#strings.contains(ad3.adhref,'jpg')
                                                 || #strings.contains(ad3.adhref,'png')
                                                 || #strings.contains(ad3.adhref,'PNG')
                                                 || #strings.contains(ad3.adhref,'JPG')
                                                 || #strings.contains(ad3.adhref,'JPEG'))}">
                                                <img class="img" th:src="${ad3.adhref}"/>
                                            </div>
                                            <div align="center" th:if="${ad3!=null && ad3.adhref!=null && #strings.contains(ad3.adhref,'mp4')}">视频</div>
                                        </td>
                                        <td width="500px">
                                            <div align="center" th:if="${ad3!=null}"><input class="form-control" type="text" id="link3" th:value="${ad3.adhref}" style="width:500px;text-align:left;" /></div>
                                            <div align="center" th:if="${ad3==null}"><input class="form-control" type="text" id="link3" value="http://" style="width:500px;text-align:left;" /></div>
                                        </td>
                                        <td width="500">
                                            <!-- 有值时 -->
                                            <div id="diyinput3" style='position:relative;' class='diyPath' th:if="${ad3.wxhref!=null && ad3.wxhref!=''}" >
                                                <input class="form-control wxpathval" type="text"  th:value="${ad3.wxhref}"/>
                                                <span index="3" class='choiceReset' style='position:absolute; right:0px; top:15px; width:80px; height:80px; text-align:center; color:#000; cursor:pointer;'>重选</span>
                                            </div>
                                            <!-- 小程序地址渲染 -->
                                            <div align="center" class="selectElm" index="3" id="selectElm3" th:style="${(ad3.wxhref==null || ad3.wxhref=='')?'display:block;':'display:none;'}"></div>
                                        </td>
                                        <td width="130px">
                                            <div align="center" th:if="${ad3!=null}"><label class="badge status"  th:classappend="${ad3.status=='已审核'}?'badge-light-success':'badge-light-danger'"  th:text="${ad3.status}"></label></div>
                                        </td>
                                        <td width="300px">
                                            <div align="center">
                                                <a href="#!" index="3"  ordernum="3" title="更新" class="funBtn"><i class="icon feather icon-edit f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="3"  ordernum="3" title="显示" class="funBtn"><i class="fas fa-parking f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="3"  ordernum="3" title="隐藏" class="funBtn"><i class="fas fa-minus-circle f-w-600 f-16 text-c-red"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50px"><div align="center"><input class="form-control" disabled type="text" id="num4" value="4" style="width:50px;text-align:center;" /></div></td>
                                        <td width="200px"><div align="center"><input class="form-control" type="text" id="title4" th:if="${ad4!=null}" th:value="${ad4.adtitle}" style="width:200px;text-align:left;" /></div></td>
                                        <td width="100px">
                                            <div align="center"
                                                 th:if="${ad4!=null && ad4.adhref!=null
                                                 && (#strings.contains(ad4.adhref,'jpg')
                                                 || #strings.contains(ad4.adhref,'png')
                                                 || #strings.contains(ad4.adhref,'PNG')
                                                 || #strings.contains(ad4.adhref,'JPG')
                                                 || #strings.contains(ad4.adhref,'JPEG'))}">
                                                <img class="img" th:src="${ad4.adhref}"/>
                                            </div>
                                            <div align="center" th:if="${ad4!=null && ad4.adhref!=null && #strings.contains(ad4.adhref,'mp4')}">视频</div>
                                        </td>
                                        <td width="500px">
                                            <div align="center" th:if="${ad4!=null}"><input class="form-control" type="text" id="link4" th:value="${ad4.adhref}" style="width:500px;text-align:left;" /></div>
                                            <div align="center" th:if="${ad4==null}"><input class="form-control" type="text" id="link4" value="http://" style="width:500px;text-align:left;" /></div>
                                        </td>
                                        <td width="500">
                                            <!-- 有值时 -->
                                            <div id="diyinput4" style='position:relative;' class='diyPath' th:if="${ad4.wxhref!=null && ad4.wxhref!=''}" >
                                                <input class="form-control wxpathval" type="text"  th:value="${ad4.wxhref}"/>
                                                <span index="4" class='choiceReset' style='position:absolute; right:0px; top:15px; width:80px; height:80px; text-align:center; color:#000; cursor:pointer;'>重选</span>
                                            </div>
                                            <!-- 小程序地址渲染 -->
                                            <div align="center" class="selectElm" index="4" id="selectElm4" th:style="${(ad4.wxhref==null || ad4.wxhref=='')?'display:block;':'display:none;'}"></div>
                                        </td>
                                        <td width="130px">
                                            <div align="center" th:if="${ad4!=null}"><label class="badge status"  th:classappend="${ad4.status=='已审核'}?'badge-light-success':'badge-light-danger'"  th:text="${ad4.status}"></label></div>
                                        </td>
                                        <td width="300px">
                                            <div align="center" >
                                                <a href="#!" index="4"  ordernum="4" title="更新" class="funBtn"><i class="icon feather icon-edit f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="4"  ordernum="4" title="显示" class="funBtn"><i class="fas fa-parking f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="4"  ordernum="4" title="隐藏" class="funBtn"><i class="fas fa-minus-circle f-w-600 f-16 text-c-red"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="50px"><div align="center"><input class="form-control" disabled type="text" id="num5" value="5" style="width:50px;text-align:center;" /></div></td>
                                        <td width="200px"><div align="center"><input class="form-control" type="text" id="title5" th:if="${ad5!=null}" th:value="${ad5.adtitle}" style="width:200px;text-align:left;" /></div></td>
                                        <td width="100px">
                                            <div align="center"
                                                 th:if="${ad5!=null && ad5.adhref!=null
                                                 && (#strings.contains(ad5.adhref,'jpg')
                                                 || #strings.contains(ad5.adhref,'png')
                                                 || #strings.contains(ad5.adhref,'PNG')
                                                 || #strings.contains(ad5.adhref,'JPG')
                                                 || #strings.contains(ad5.adhref,'JPEG'))}">
                                                <img class="img" th:src="${ad5.adhref}"/>
                                            </div>
                                            <div align="center" th:if="${ad5!=null && ad5.adhref!=null && #strings.contains(ad5.adhref,'mp4')}">视频</div>
                                        </td>
                                        <td width="500px">
                                            <div align="center" th:if="${ad5!=null}"><input class="form-control" type="text" id="link5" th:value="${ad5.adhref}" style="width:500px;text-align:left;" /></div>
                                            <div align="center" th:if="${ad5==null}"><input class="form-control" type="text" id="link5" value="http://" style="width:500px;text-align:left;" /></div>
                                        </td>
                                        <td width="500">
                                            <!-- 有值时 -->
                                            <div id="diyinput5" style='position:relative;' class='diyPath' th:if="${ad5.wxhref!=null && ad5.wxhref!=''}" >
                                                <input class="form-control wxpathval" type="text"  th:value="${ad5.wxhref}"/>
                                                <span index="5" class='choiceReset' style='position:absolute; right:0px; top:15px; width:80px; height:80px; text-align:center; color:#000; cursor:pointer;'>重选</span>
                                            </div>
                                            <!-- 小程序地址渲染 -->
                                            <div align="center" class="selectElm" index="5" id="selectElm5" th:style="${(ad5.wxhref==null || ad5.wxhref=='')?'display:block;':'display:none;'}"></div>
                                        </td>
                                        <td width="130px">
                                            <div align="center" th:if="${ad5!=null}"><label class="badge status" th:classappend="${ad5.status=='已审核'}?'badge-light-success':'badge-light-danger'" th:text="${ad5.status}"></label></div>
                                        </td>
                                        <td width="300px">
                                            <div align="center">
                                                <a href="#!" index="5"  ordernum="5" title="更新" class="funBtn"><i class="icon feather icon-edit f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="5"  ordernum="5" title="显示" class="funBtn"><i class="fas fa-parking f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a href="#!" index="5"  ordernum="5" title="隐藏" class="funBtn"><i class="fas fa-minus-circle f-w-600 f-16 text-c-red"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Latest Order end -->
            </div>
        </div> <!-- [ Main Content ] end -->

    </div>
    
</div> <!--中间 End -->


<!-- 引用模板 Bottom -->
    <div th:insert="bg/publicBottom :: publicBottom"></div>
<!-- [ Bottom ] end -->



</body>



</html>
